<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>navigator 对象练习</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }

        pre {
            background-color: #f4f4f4;
            padding: 15px;
            border-radius: 5px;
            white-space: pre-wrap;
        }
    </style>
</head>
<body>

<h1>navigator 对象练习</h1>

<h2>浏览器信息如下：</h2>
<pre id="output"></pre>

<button onclick="refreshInfo()">刷新信息</button>

<script>
    /**
     * navigator 对象常用的属性：
     * - userAgent：浏览器的用户代理字符串
     * - platform：运行浏览器的操作系统平台
     * - cookieEnabled：是否启用了 Cookie
     * - language：浏览器使用的语言
     * - onLine：设备是否联网（HTML5 新增）
     */

    function getBrowserInfo() {
        const info = `
            navigator.userAgent: ${navigator.userAgent}
            navigator.platform: ${navigator.platform}
            navigator.cookieEnabled: ${navigator.cookieEnabled}
            navigator.language: ${navigator.language || '未知'}
            navigator.onLine: ${navigator.onLine}
      `;
        return info;
    }

    function refreshInfo() {
        document.getElementById("output").textContent = getBrowserInfo();
    }

    // 页面加载时自动显示一次
    window.onload = function () {
        refreshInfo();
    };
</script>

</body>
</html>
